<!--
 * @Author: GKN
 * @Date: 2023-09-01 10:42:44
 * @LastEditTime: 2024-02-01 15:42:42
 * @LastEditors: GKN
 * @Description: 
 * @FilePath: \mod\src\view\animatedly\info.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
  <div class="main mainPadding p-t" style="background: #fff">
    <div class="max-w">
      <listInfo
        v-loading="isshowToken"
        :source="info && info.source"
        :time="info && info.startTm"
        @Like="Like"
        @collect="collect"
        :title="info ? info.name : ''"
      >
        <template v-slot:content>
          <div style="position: relative">
            <div
              v-if="showblak"
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: #fff;
                padding-top: 100px;
              "
            >
              <el-empty :image-size="150" description="请先登录" />
            </div>
            <div class="p-t" v-if="loading">
              <el-skeleton :rows="8" animated />
            </div>
            <div v-if="!loading">
              <!-- <div class="f-title-26 MarT12" style="text-align: center">
              {{ info && info.name }}
            </div> -->
              <div
                class="font-content-18 p-t"
                style="line-height: 28px; text-indent: 36px"
              >
                {{ info && info.blurb }}
              </div>
              <div v-if="info && !info.isFree && info.price > 0">
                <div class="ad-view" style="width: 100%; height: auto">
                  <img
                    style="width: 100%"
                    :src="proxy.$api.prefix_img + info.fileUrl"
                    alt=""
                  />
                </div>
              </div>
              <div class="withFull" v-if="info && info.fileType == 3">
                <div
                  class="ad-view MarT12"
                  style="width: 100%; height: 600px; background: #333"
                >
                  <vue3VideoPlay
                    width="100%"
                    height="100%"
                    title=""
                    :src="fileUrl"
                    :autoPlay="true"
                    @play="onPlay"
                    @pause="onPause"
                    @timeupdate="onTimeupdate"
                    @canplay="onCanplay"
                  />
                </div>
              </div>
              <div style="width: 100%; padding: 0 30px" v-show="isfile">
                <vue-pdf-embed
                  v-for="i in num"
                  v-if="fileUrl"
                  :source="fileUrl"
                  class="vue-pdf-embed"
                  :page="i"
                />
                <div
                  class="pager p-t flex flex-j-c"
                  v-if="fileUrl && info.fileType != 3"
                >
                  <el-button
                    v-if="num < pagesCount"
                    type="primary"
                    @click="nextbtn"
                    >加载更多</el-button
                  >
                </div>
              </div>
              <div
                v-if="info && info.price > 0 && !info.isFree"
                class="btn1 cursor-p"
                style="margin: 50px auto"
                @click="pay"
              >
                剩余部分未加载，支付￥{{ info.price }}查看，VIP免费阅读文档
              </div>
              <div class="vipview shadow-1" style="margin-top: 22px">
                <div class="title" style="text-align: center">
                  VIP专属特权查看相关文档
                </div>
                <div
                  class="btn cursor-p"
                  style="text-align: center"
                  @click="goUser"
                >
                  最低五元限时开通VIP，解锁全部文档
                </div>
              </div>
            </div>
          </div>
        </template>
      </listInfo>
      <!-- <Card1 title="精彩推荐" :more="false" style="margin-top:57px;">
            <template v-slot:main1>
                <el-row :gutter="20">
                    <el-col :span="6" v-for="item in list" :key="item">
                        <div class="item">
                            <div class="img border-r6">
                                <img class="ad-img" :src="item.img" alt="">
                            </div>
                            <div style="padding-top:18px;">
                                <div class="font-title">{{ item.title }}</div>
                                <div class="font-content omit-2">{{ item.desc }}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </template>
      </Card1> -->
      <el-dialog
        v-model="is_pay"
        title=""
        width="40%"
        style="border-radius: 15px"
      >
        <div style="font-size: 24px; font-weight: bold; color: #333">
          确认付款
        </div>
        <div style="width: 100%; margin-top: 50px" v-loading="payLoading">
          <el-row :gutter="20">
            <el-col :span="24">
              <div style="font-size: 17px; color: #333; text-align: left">
                在线支付
              </div>
              <div class="payType cursor-p" style="margin-top: 20px">
                <div
                  v-for="(item, i) in list_payType"
                  :key="i"
                  :class="item.select ? 'active item ' : 'item'"
                  @click="click_payType(i)"
                >
                  <img
                    v-if="i == 0"
                    class="ad-img"
                    src="~@/assets/img/user/p1.png"
                    alt=""
                  />
                  <img
                    v-if="i == 1"
                    class="ad-img"
                    src="~@/assets/img/user/p2.png"
                    alt=""
                  />
                  <span>{{ item.name }}</span>
                </div>
              </div>
              <div
                style="
                  font-size: 16px;
                  color: #333;
                  text-align: left;
                  margin-top: 28px;
                "
              >
                <span>应付金额￥ </span>
                <span
                  style="color: #d00b00; font-size: 18px; font-weight: bold"
                  >{{ info.price }}</span
                >
              </div>
              <div
                style="
                  margin-top: 15px;
                  font-size: 13px;
                  color: #8d8d8d;
                  text-align: left;
                "
              >
                剩余支付时间
                <span></span>，否则订单将自动失效
              </div>
              <div
                class="btn-submit"
                @click="payclick"
                style="margin: 50px auto"
              >
                立即支付
              </div>
            </el-col>
          </el-row>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script setup>
import { ref, reactive, onMounted, getCurrentInstance, watch } from "vue";
const { proxy } = getCurrentInstance();
import CryptoJS from "crypto-js";
import { useRoute, useRouter } from "vue-router";
const Router = useRouter();
import listInfo from "../components/listInfo.vue";
import Card1 from "../components/card1.vue";
import VuePdfEmbed from "vue-pdf-embed";

import MuiPlayer from "mui-player";
import "mui-player/dist/mui-player.min.css";
const info = ref(null);
const loading = ref(true);
const isshowToken = ref(true);
const showblak = ref(false);
const isToken = () => {
  const loginData = JSON.parse(localStorage.getItem("loginData"));
  if (!loginData) {
    showblak.value = true;
    setTimeout(() => {
      isshowToken.value = false;
      Router.push({
        path: "/login",
      });
    }, 600);
  } else {
    isshowToken.value = false;
    showblak.value = false;
  }
};
isToken();
const urlArr = ref({
  fileUrl: "https://file.xdqycx.com/",
  imgUrl: "https://img.zgcxcgk.com/",
  vodUrl: "https://vod.zgcxcgk.com/",
});
// 导航参数
const query = proxy.$comJs.decrypt(Router.currentRoute.value.query.ob, "query");
// 面包屑
const breadcrumb_list = [
  { name: "首页", path: "/" },
  { name: query.title, path: query.path },
  { name: "正文" },
];
const list = ref([]);
const url = ref("");
const imgUrl = ref("");
const pages = ref([]);
const fileUrl = ref("");
const isfile = ref(false);
const num = ref(1);
const pagesCount = ref(1);
const getInfo = () => {
  proxy.$http.request(
    proxy.$api.topicChildList +'/'+ query.id,
    "get",
    {},
    false,
    function (res) {
      if (res.msg == "登录已过期") {
        isToken();
      }
      if (res && res.data) {
        if (res.data.code != 0) {
          proxy.$comJs.msg("", res.data.msg, 3);
        } else {
          info.value = res.data.data;
          pages.value = [];
          if (res.data.data.price > 0) {
            if (!res.data.data.isFree) {
              setTimeout(() => {
                loading.value = false;
              }, 900);
              return;
            }
          }
          if (res.data.data.fileType == 3) {
            fileUrl.value = urlArr.value.vodUrl + res.data.data.fileUrl;
            loading.value = false;
            return;
          } else {
            fileUrl.value = urlArr.value.fileUrl + res.data.data.fileUrl;
          }
          isfile.value = true;
          pagesCount.value = res.data.data.page;
          loading.value = false;
        }
      }
      setTimeout(() => {
        loading.value = false;
      }, 900);
    }
  );
};
getInfo();
const nextbtn = () => {
  num.value = num.value < pagesCount.value ? num.value + 1 : pagesCount.value;
};
const prevbtn = () => {
  num.value = num.value > 2 ? num.value - 1 : 1;
};
const goUser = () => {
  Router.push("/user");
};
// 支付
const payLoading = ref(false);
const is_pay = ref(false);
const index_payType = ref(0);
const list_payType = ref([
  { name: "支付宝支付", select: true },
  { name: "微信支付", select: false },
]);
watch(is_pay, (val) => {
  if (!val) {
    getInfo();
  }
});
const click_payType = (i) => {
  list_payType.value.map((item) => {
    item.select = false;
  });
  list_payType.value[i].select = true;
  index_payType.value = i;
};
const pay = () => {
  is_pay.value = true;
};
const payclick = () => {
  payLoading.value = true;
  proxy.$http.request(
    proxy.$api.pay,
    "post",
    {
      payWay: index_payType.value == 0 ? 1 : 2,
      source: 2,
      threeId: query.id,
    },
    false,
    function (res) {
      if (res && res.data) {
        if (res.data.code != 0) {
          proxy.$comJs.msg("error", "提交失败");
          payLoading.value = false;
        } else {
          setTimeout(() => {
            payLoading.value = false;
            window.open(res.data.data.data);
          }, 300);
        }
      } else {
        payLoading.value = false;
      }
    }
  );
};
const Like = () => {
  proxy.$http.request(
    proxy.$api.Like,
    "post",
    {
      tag: 1,
      newsId: query.id,
    },
    false,
    function (res) {
      if (res && res.data) {
        if (res.data.code != 0) {
          proxy.$comJs.msg("error", "提交失败");
        } else {
          proxy.$comJs.msg("success", "点赞成功");
        }
      }
    }
  );
};
const collect = () => {
  proxy.$http.request(
    proxy.$api.collect,
    "post",
    {
      tag: 1,
      newsId: query.id,
    },
    false,
    function (res) {
      if (res && res.data) {
        if (res.data.code != 0) {
          proxy.$comJs.msg("error", "提交失败");
        } else {
          proxy.$comJs.msg("success", "收藏成功");
        }
      }
    }
  );
};
</script>
  
  <style lang='less' scoped>
.item {
  height: 260px;
  .img {
    height: 164px;
    width: 100%;
  }
}
.btn1 {
  width: 390px;
  text-align: center;
  height: 40px;
  background: #ffffff;
  border-radius: 8px 8px 8px 8px;
  border: 1px solid #d10b00;
  font-size: 16px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #d10b00;
  line-height: 40px;
  margin: 42px auto;
}
.vipview {
  width: 100%;
  padding: 47px 48px 20px 48px;
  background: linear-gradient(to bottom, #ececec, rgba(255, 225, 205, 1));
  border-radius: 10px 10px 10px 10px;
  .title {
    font-size: 30px;
    font-family: SourceHanSansCN-Medium, SourceHanSansCN;
    font-weight: 500;
    color: #77472f;
    padding-top: 0;
  }
  .center {
    display: flex;
  }
  .item {
    width: 14%;
    padding: 0 5px;
    .img {
      width: 142px;
      height: 200px;
    }
    .cont {
      padding-top: 20px;
      .t {
        font-size: 14px;
        text-align: left;
      }
      .c {
        font-size: 12px;
        text-align: left;
        color: #8d8d8d;
      }
    }
  }
  .btn {
    width: 350px;
    height: 48px;
    background: #d10b00;
    border-radius: 24px 24px 24px 24px;
    opacity: 1;
    border: 1px solid #d10b00;
    font-size: 16px;
    color: #fff;
    line-height: 48px;
    margin: 40px auto;
  }
}
.payType {
  display: flex;
  .item {
    width: 148px;
    height: 56px;
    border: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    margin-right: 15px;
    border-radius: 6px;
    padding: 0 5px;
    img {
      width: 28px;
      height: 20px;
    }
    span {
      color: #8d8d8d;
      font-size: 18px;
      margin-left: 12px;
    }
  }
  .active {
    border: 1px solid #fcbdbd;
  }
}
</style>
  
